<template>
  <div>
    <el-row>
      <el-col :span="24" style="margin-bottom:10px" align="right">
        <el-button size="small" type="primary" @click="add">添加人员</el-button>
        <el-input style="width:200px" size="small" clearable v-model="filter.name" placeholder="请输入人员姓名"></el-input>
        <el-input style="width:200px" size="small" clearable v-model="filter.dept" placeholder="请输入员工部门"></el-input>
        <el-cascader size="small" :options="NetGrid" clearable v-model="selectOptions" @change="changeVal2" :props="prop">
        </el-cascader>
        <el-button size="small" type="primary" @click="getStaffInfo">查询</el-button>
        <el-button size="small" type="primary" @click="flush">刷新</el-button>
      </el-col>
      <el-col :span="24">
        <el-table v-loading="loading" :data="list" border stripe>
          <el-table-column v-for="(v,i) in props" :key="i" :label="v.label" :prop="v.prop" align="center">
            <template scope="scope">
              <span v-if="v.prop=='netGrid'">
                {{scope.row.fatherName+"/"+scope.row.netGridName}}
              </span>
              <span v-else-if="v.prop=='policitalStatus'">
                {{scope.row.politicsTypeName}}
              </span>
              <span v-else>
                {{scope.row[v.prop]}}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template scope="scope">
              <el-button size="small" @click="edit(scope.row,scope.row.netGrid)" type="primary">编辑</el-button>
              <el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <el-pagination style="margin-top:10px;float:right" layout="prev, pager, next" :total="totalInfo" @current-change="handleCurrentChange">
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="visible" title="添加部门人员" size="tiny">
      <el-form :model="form" label-width="80px" label-suffix=":">
        <el-form-item v-for="(v,i) in props" :key="i" :label="v.label" v-if="v.prop!='id'">
          <el-select v-if="v.prop=='policitalStatus'" v-model="form[v.prop]">
            <el-option v-for="(v,i) of Politics" :key="i" :value="v.politicsTypeValue" :label="v.politicsTypeName"></el-option>
          </el-select>
          <el-cascader v-else-if="v.prop=='netGrid'" :options="NetGrid" @change="changeVal" :props="prop">
          </el-cascader>
          <el-input v-else v-model="form[v.prop]"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="visible=false">取消</el-button>
          <el-button type="primary" @click="save">添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="visible2" title="编辑部门人员" size="tiny">
      <el-form :model="form" label-width="100px" label-suffix=":">
        <el-form-item v-for="(v,i) in props" :key="i" :label="v.label" v-if="v.prop!='id'">
          <el-select v-if="v.prop=='policitalStatus'" v-model="form[v.prop]">
            <el-option v-for="(v,i) of Politics" :key="i" :value="v.politicsTypeValue" :label="v.politicsTypeName"></el-option>
          </el-select>
          <el-cascader v-else-if="v.prop=='netGrid'" v-model="selectOptions" :options="NetGrid" @change="changeVal" :props="prop">
          </el-cascader>
          <el-input v-else v-model="form[v.prop]"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="visible2=false">取消</el-button>
          <el-button type="primary" @click="update">更新</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/netGridManage";
import * as api2 from "@/api/zonghezhili/duiwujianshe";

export default {
  watch: {
    visible: function(val) {
      if (val == false) {
        Object.keys(this.form).forEach(key => {
          this.form[key] = null;
        });
        this.selectOptions = [];
      }
    },
    visible2: function(val) {
      if (val == false) {
        Object.keys(this.form).forEach(key => {
          this.form[key] = null;
        });
        this.selectOptions = [];
      }
    }
  },
  data() {
    return {
      loading: true,
      selectOptions: [],
      NetGrid: [],
      visible: false,
      visible2: false,
      filter: {
        name: "",
        dept: "",
        netGrid: "",
        page: 1,
        pageSize: 10
      },
      Politics: [],
      list: [],
      totalInfo: 0,
      form: {
        id: "",
        name: "",
        dept: "",
        post: "",
        netGrid: 20,
        netGridPost: "",
        policitalStatus: "",
        contact: ""
      },
      props: [
        {
          prop: "id",
          label: "编号"
        },
        {
          prop: "name",
          label: "姓名"
        },
        {
          prop: "dept",
          label: "所属部门"
        },
        {
          prop: "post",
          label: "职务"
        },
        {
          prop: "netGrid",
          label: "所属网格"
        },
        {
          prop: "netGridPost",
          label: "网格职务"
        },
        {
          prop: "policitalStatus",
          label: "政治面貌"
        },
        {
          prop: "contact",
          label: "联系方式"
        }
      ],
      prop: {
        value: "netGridID",
        label: "netGridName",
        children: "children"
      }
    };
  },
  methods: {
    changeVal(val) {
      this.form.netGrid = val[1];
    },
    changeVal2(val) {
      this.filter.netGrid = val[1];
    },
    edit(row, netGridID) {
      this.visible2 = true;
      Object.keys(this.form).forEach(key => {
        this.form[key] = row[key];
      });

      this.NetGrid.forEach(m => {
        let flag = false;
        m.children.forEach(x => {
          if (x.netGridID == netGridID) {
            flag = true;
            return;
          }
        });
        if (flag) {
          this.selectOptions = [m.netGridID, netGridID];
          return;
        }
      });
    },
    add() {
      this.visible = true;
    },
    async update() {
      let res = await api.updateStaff('d',this.form);
      if (res.data == true) {
        this.$message({
          message: "更新成功！",
          type: "success"
        });
        this.visible2 = false;
        this.getStaffInfo();
      } else {
        this.$message({
          message: "更新失败！",
          type: "error"
        });
      }
    },
    async save() {
      let res = await api.addStaff('d',this.form);
      if (res.data == true) {
        this.$message({
          message: "保存成功！",
          type: "success"
        });
        this.visible = false;
        this.getStaffInfo();
      } else {
        this.$message({
          message: "保存失败！",
          type: "error"
        });
      }
    },
    del(id) {
      this.$confirm("确认要删除此信息吗？", "是否继续", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let res = await api.deleteStaff('d',id);
          if(res.data = true){
            this.$message({
              message: '删除成功！',
              type: 'success'
            });
          }
          this.getStaffInfo();
        })
        .catch(() => {
          this.$message({
            message: "取消删除",
            type: "info"
          });
        });
    },
    handleCurrentChange(val) {
      this.filter.page = val;
      this.getStaffInfo();
    },
    flush() {
      Object.keys(this.filter).forEach(key => {
        this.filter[key] = "";
      });
      this.filter.page = 1;
      this.filter.pageSize = 10;
      this.selectOptions = [];
    },
    async getStaffInfo() {
      this.loading = true;
      let res = await api.getStaffInfo('d',this.filter);
      this.list = res.data.list;
      this.totalInfo = res.data.total;
      this.loading = false;
    }
  },
  mounted() {
    this.getStaffInfo();
    this.NetGrid = this.$store.getters.NetGrid;
    api2.fetchServedPersonManageTypes().then(async res => {
      this.Politics = res.data.codePoliticsType;
    });
  }
};
</script>

<style scoped>
</style>
